﻿@page "/chart/percent-stacked-column"

@using Syncfusion.Blazor
@using ThemeHelper
@using Syncfusion.Blazor.Charts

@inject NavigationManager NavigationManager
@inherits SampleBaseComponent;

<SampleDescription>
    <p>This <a target='_blank' href='https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/100-stacked-column-chart'>Blazor 100% Stacked Column Chart</a> example visualizes percentage of domestic product growth of four different countries with default 100% stacked column series in the chart. Legend in the sample shows the information about the series.</p>
</SampleDescription>
<ActionDescription>
    <p>In this example, you can see how to render and configure the 100% stacked column type chart. The 100% stacking column type chart displays multiple series of data as stacked columns, ensuring that the cumulative proportion of each stacked element always totals 100%.</p>
    <p><code>Tooltip</code> is enabled in this example, to see the tooltip in action, hover a point or tap on a point in touch enabled devices.</p>
    <p>More information about the 100% stacked column series can be found in this <a target='_blank' href='https://blazor.syncfusion.com/documentation/chart/chart-types/stack-column'>documentation section</a>.</p>
</ActionDescription>

<div class="control-section">
    <SfChart Title="Gross Domestic Product Growth" Theme="@Theme">
        <ChartArea><ChartAreaBorder Width="0"></ChartAreaBorder></ChartArea>
        <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category" LabelIntersectAction="LabelIntersectAction.Rotate45">
            <ChartAxisMajorGridLines Width="0"></ChartAxisMajorGridLines>
            <ChartAxisMinorGridLines Width="0"></ChartAxisMinorGridLines>
            <ChartAxisMajorTickLines Width="0"></ChartAxisMajorTickLines>
            <ChartAxisMinorTickLines Width="0"></ChartAxisMinorTickLines>
        </ChartPrimaryXAxis>
        <ChartPrimaryYAxis Title="GDP (%) per Annum" RangePadding="ChartRangePadding.None" Interval="20">
            <ChartAxisLineStyle Width="0"></ChartAxisLineStyle>
            <ChartAxisMajorGridLines Width="1"></ChartAxisMajorGridLines>
            <ChartAxisMinorGridLines Width="1"></ChartAxisMinorGridLines>
            <ChartAxisMajorTickLines Width="0"></ChartAxisMajorTickLines>
            <ChartAxisMinorTickLines Width="0"></ChartAxisMinorTickLines>
        </ChartPrimaryYAxis>
        <ChartSeriesCollection>
            <ChartSeries DataSource="@ChartPoints" XName="Year" YName="UK_Trade" Width="2" Name="UK" Type="ChartSeriesType.StackingColumn100">
            </ChartSeries>
            <ChartSeries DataSource="@ChartPoints" XName="Year" YName="GER_Trade" Width="2" Name="Germany" Type="ChartSeriesType.StackingColumn100">
            </ChartSeries>
            <ChartSeries DataSource="@ChartPoints" XName="Year" YName="FR_Trade" Width="2" Name="France" Type="ChartSeriesType.StackingColumn100">
            </ChartSeries>
            <ChartSeries DataSource="@ChartPoints" XName="Year" YName="IT_Trade" Width="2" Name="Italy" Type="ChartSeriesType.StackingColumn100">
            </ChartSeries>
        </ChartSeriesCollection>
        <ChartTooltipSettings Enable="true" Format="${point.x} : <b>${point.y} (${point.percentage}%)</b>"></ChartTooltipSettings>
    </SfChart>
</div>

@code{

    private Theme Theme { get; set; }
    public List<StackedColumn100ChartData> ChartPoints { get; set; } = new List<StackedColumn100ChartData>
    {
        new StackedColumn100ChartData { Year = "2006", UK_Trade = 900, GER_Trade = 190, FR_Trade = 250, IT_Trade = 150},
        new StackedColumn100ChartData { Year = "2007", UK_Trade = 544, GER_Trade = 226, FR_Trade = 145, IT_Trade = 120},
        new StackedColumn100ChartData { Year = "2008", UK_Trade = 880, GER_Trade = 194, FR_Trade = 190, IT_Trade = 115},
        new StackedColumn100ChartData { Year = "2009", UK_Trade = 675, GER_Trade = 250, FR_Trade = 220, IT_Trade = 125}
    };

    protected override void OnInitialized()
    {
        Theme = ThemeHelper.GetCurrentTheme(NavigationManager.Uri);
    }

    public class StackedColumn100ChartData
    {
        public string Year { get; set; }
        public double UK_Trade { get; set; }
        public double GER_Trade { get; set; }
        public double FR_Trade { get; set; }
        public double IT_Trade { get; set; }
    }
}
